Efecto deslizante en los archivos de la sidebar

Han sido varias las ocasiones que me preguntaron la forma de crear ese efecto deslizante en los archivos, así que pensé que sería buena idea crear esta entrada y explicar con detalles los pasos a seguir.

Antes de comenzar debo añadir que la sugerencia de añadir este efecto fue de J.Miur quien gentilmente y como en otras ocasiones también me proporcionó toda clase de explicaciones para llevarlo a la práctica.

Guarda una copia de la plantilla para evitar problemas innecesarios.

1º Para este efecto deslizante es necesario Prototype y Scriptaculous, estas librerías las podemos conseguir con un script de Google API y lo añadiremos justo antes de </head>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Podría ser que ya tuviéramos el script añadido anteriormente para el uso de cualquier efecto de ser así omitimos este paso.

2º En plantilla Edición de HTML marcamos para expandir artilugios y buscamos algo así:

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

Justo después añadimos:

<div id='masmenosArchivos'><a href='#' onclick='Effect.toggle(&quot;ArchiveList&quot;,&quot;slide&quot;); return false'> [+/-] ARCHIVOS</a></div>

Cuando añadimos esa porción de código veremos justo después <div id='ArchiveList'> y lo vamos a sustituir por:

<div id='ArchiveList' style='display:none;'>

3º Guardamos los cambios y nos situamos justo antes de ]]></b:skin> allí añadimos los estilos para los archivos.

.BlogArchive #ArchiveList ul ul li {

margin : 0px !important;

padding: 5px 0px 0px 0px !important;

text-indent: -15px !important ;

}

#BlogArchive1 a {

font-weight:bold;

color: #000;

font-size: 12px;

text-decoration:none;

width: 100%;

}

#BlogArchive1 a:hover{

font-weight:bold;

color: #fff;

font-size: 12px;

text-decoration:none;

}

En "#BlogArchive1 a" modificamos el color del título, para el tamaño de la fuente lo haremos en font-size.

En "#BlogArchive1 a:hover" tenemos el color del título al pasar el cursor, al igual que el tamaño de fuente

Los enlaces de archivos se mostrarán tal y como tenemos configurado para el color de enlaces.

Siguiendo estos pasos nos aparecerá en la sidebar un texto de [+/-] ARCHIVOS que probablemente veamos repetido en la sidebar. No ocurre nada porque vamos a suprimir el primero.

Nos situamos en plantilla de diseño o en la herramienta de archivos si estamos logueados y editamos la etiqueta de archivos, eliminamos el título... guardamos los cambios y listo.

Podemos sustituir el texto por cualquier otro o por una imagen para ello buscamos el código del paso 2º y sustituimos el texto por cualquier otro o por una imagen:

<img src="url-imagen" />

Si deseamos que la imagen reúna los mismos estilos que el resto de los títulos también tiene solución.

Buscamos los estilos de los títulos de la sidebar, normalmente en sidebar h2 copiamos los estilos (en color rojo son los estilos)

.sidebar h2{

margin:0;

margin: 1.6em 0 .5em;

padding: 4px 5px;

color:#000;

font-size:12px;

font-weight:bold;

text-decoration:none;

}

Luego nos situamos justo antes de </head> y allí añadimos lo siguiente:

<style type='text/css'>

#masmenosArchivos {

aquí pegamos los estilos de sidebar h2

#masmenosArchivos a {

color: #CCC;

}

#masmenosArchivos a:hover {

background: none;

color:#eee;

}

</style>

Donde dice "aquí pegamos los estilos de sidebar h2" obviamente pegaremos lo que marqué en color rojo más arriba, como es lógico cada uno puede tener estilos diferentes.

El resultado de estos cambios lo podéis ver en mis archivos, creo que no falta nada únicamente recordar que antes de probar guardéis una copia de la plantilla.